<template>
  <div class="demo">
    <div class="demo-title">基本使用</div>
    <div class="demo-content">
      <div class="demo-base">
        <BackTop />
        Scroll down to see the bottom-right
        <strong style="color: rgba(64, 64, 64, 0.6)">gray</strong>
        button.
      </div>
      <div class="demo-custom">
        <BackTop>
          <div class="up">UP</div>
        </BackTop>
        Scroll down to see the bottom-right
        <strong style="color: #1088e9">blue</strong>
        button.
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import BackTop from '@sscd/back-top';
</script>

<style lang="less" scoped>
  .demo-content {
    height: 150vh;
    .demo-custom {
      .ant-back-top {
        bottom: 100px;
        .up {
          width: 40px;
          height: 40px;
          line-height: 40px;
          border-radius: 4px;
          background-color: #1088e9;
          color: #fff;
          text-align: center;
          font-size: 20px;
        }
      }
    }
  }
</style>
